<!-- 更换手机 -->
<template>
	<view class="index pd-lr36">
		<view class="mt10"><text class="title">我的手机号</text></view>
		<view class="inputs">
			<input class="input-text" :type='testOk?"number":"text"' v-model="values" placeholder="请输入新的手机号" :disabled="!testOk" :maxlength="testOk?11:20" :adjust-position="false" />
			<view @click="handleCodes" class="code">{{ time || '发送验证码' }}</view>
		</view>
		<view class="mt10 inputs">
			<input class="input-text" type="number" v-model="code" placeholder-class="placeholder-class" placeholder="请填写验证码" maxlength="6" :adjust-position="false" />
		</view>
		<view v-if="!testOk" @click="goBinds" class="next">
			<view class="next-img"><image :src="code && codeGet ? '/static/icon/next-active.png' : '/static/icon/next.png'" mode="widthFix"></image></view>
		</view>
		<view @click="handleBindputok" v-else class="bind ac" :class="{ active: values && code && codeGet}"><text>{{testOk ? '更换' : '绑定'}}</text></view>
	</view>
</template>

<script>
import { apiPostLoginVerify, apiPostLoginVerifyCode, apiPostLoginMobileCode, apiPostLoginMobile } from '@/api/me.js';
import {newData} from "@/utils/common.js"
export default {
	components: {},
	data() {
		return {
			values: '',
			code: '',
			codeGet: false,
			testOk: false,
			time: 0,
			times: null
		};
	},
	onLoad(data) {
		this.values = data.mobile;
	},
	watch: {
		time(val) {
			if (val == 60) {
				this.times = setInterval(() => {
					this.time--;
					if(this.time < 0) this.time = 0; 
					if (!this.time) {
						clearInterval(this.times);
						this.times = null;
					}
				}, 1000);
			}
		}
	},
	methods: {
		handleCodes() {
			
			if (!this.testOk) {
				if (!this.time) {
					this.time = 60;
					apiPostLoginVerifyCode()
						.catch(() => {
							this.time = 0
							clearInterval(this.times);
							this.times = null;
						});
				}
			} else {
				if(!this.values){
					uni.showToast({
						title:'请输入手机号码',
						icon:'none'
					}) 
					return false; 
				}
				if (!/^1[3456789]\d{9}$/.test(this.values)) {
					uni.showToast({
						title: '手机号码错误',
						icon: 'none'
					});
					return false;
				}
				if (!this.time) {
					apiPostLoginMobileCode({mobile:this.values}).then(res=>{
						this.time = 60;
					}).catch(() => {
							this.reset()
						});
				}
			}

			this.codeGet = true;
		},
		reset(){
			this.testOk = true;
			this.values = '';
			this.code = '';
			this.time = 0;
			this.codeGet = false;
			clearInterval(this.times);
			this.times = null;
		},
		// 验证通过
		goBinds() {
			if (this.code && this.codeGet) {
				apiPostLoginVerify({ code: this.code }).then((res) => {
					uni.showToast({
						title: '验证通过',
					});
					this.reset()
					
				});
			}
		},
		handleBindputok() {
			if (!/^1[3456789]\d{9}$/.test(this.values)) {
				uni.showToast({
					title: '手机号码错误',
					icon: 'none'
				});
				return false;
			}
			if (this.values && this.code && this.codeGet) {
				
				apiPostLoginMobile({ mobile: this.values, code: this.code }).then((a) => {
					let tipMsg = this.testOk ? '更换成功' : '绑定成功'
					console.log(a,8888)
					newData(2,tipMsg)
				}).catch(e=>{
					console.log(e,777)
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.index {
	font-size: 24upx;
	height: 100%;
	color: #747384;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.placeholder-class {
	font-size: 28upx;
}
.texts {
	padding: 26upx 0;
	color: #dddbfb;
	border-bottom: 1px solid #1c1b2b;
}
.inputs {
	margin-top: 40upx;
	padding: 36upx 0;
	height: 120upx;
	line-height: 80upx;
	box-sizing: border-box;
	border-bottom: 1px solid #1c1b2b;
	position: relative;
}
.input-text {
	height: 28upx;
	width: 80%;
	line-height: 28upx;
	color: #fff;
}
.bind {
	width: 100%;
	height: 48 * 2upx;
	line-height: 48 * 2upx;
	margin-top: 60upx;
	background: rgba(28, 27, 43, 1);
	border-radius: 4 * 2upx;
	font-size: 28upx;
}
.active {
	background: #e62d54;
	color: #fff;
}
.code {
	position: absolute;
	right: 0;
	font-size: 24upx;
	top: 26upx;
	
	color: #e62d54;
	text-align: center;
	width: 20%;
	height: 30 * 2upx;
	line-height: 30 * 2upx;
	border-radius: 8upx;
	border: 1px solid rgba(230, 45, 84, 1);
	z-index: 20;
}
.mt10 {
	margin-top: 20upx;
}
.next {
	margin-top: 200upx;
	.next-img {
		width: 96upx;
		height: 96upx;
		margin: 0 auto;
	}
}
</style>
